<template>
<!-- 集数 -->
<div class="episodeListBox">
  <div class="jj-bt"><p class="epiTitle">正片<span class="jj-span"> <i class="bi bi-columns-gap"></i></span></p></div>
  <div class="jjList">
    <div class="epicWaiKe" v-for="(item, index) in list.items" :key="index">
      <router-link :to="{path:'/video',query:{look:look,index:index+1}}">
      <button @click="actionUrl(item.vurl,index)" type="button" class="but-jj fontHt" :class="{activeHover: index === epicIndex*1-1 }">{{item.vEpicName}}</button>
      </router-link>
    </div>
  </div>
</div>
<!-- pv&其他 -->
<div class="pvMore">
  <p>PV&其他</p>
  <div class="pv-lb">
    <span>先导PV</span>
  </div>
</div>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue';
import API from '@/api/AxiosConfig';
import {useStore} from 'vuex';
import {useRoute} from "vue-router";

const route = useRoute()
const epicIndex = ref(route.query.index)
watch(()=>route,()=> {
  epicIndex.value = route.query.index
},{deep:true,immediate:true})
const store = useStore()
const look = ref(route.query.look)
const list = reactive({
  items: [],

})
// const videoDef = ref(null)
let videoId = route.query.look
const emit = defineEmits(['actionUrl'])
onMounted(() => {
  API({ url: '/api/epicList/'+videoId+'', method: 'get' }).then(res => {
    list.items = res.data
    list.items.sort(function (a,b){
      return a.vEpicName - b.vEpicName
    })
    emit('actionUrl',{url:list.items[route.query.index-1].vUrl,type:list.items[route.query.index-1].vType})
  }).catch(err => {
  })
})

function actionUrl(url,index){
  emit('actionUrl', {url:list.items[index].vUrl,type:list.items[index].vType})
}
</script>

<style lang="less" scoped>
a{
  text-decoration: none;
}
/* 剧集框 */
.episodeListBox{
  margin-top: 20px;
  padding: 10px 20px 10px 20px;
  background-color: #f4f4f4;
  border-radius: 8px;
}
.fontHt{
  font-family: "黑体";
  font-weight: bold;
}
.epiTitle{
  font-family: "黑体";
  font-weight: bold;
  font-size: 20px;
  margin: 10px 0;
}
.jj-span{
  font-size: 10px;
  font-weight: bold;
}
/* 剧集按钮 */
.jjList{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* padding: 0px 10px 0px 10px; */
}
.but-jj{
  width: 70px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #212529;
  margin:5px 2px;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}
.but-jj:hover,.activeHover{
  background-color: #00a1d6;
  color: white;
}
.an{
  padding: 0 1px;
}
/* PV&其他 */
.pvMore{
  margin-top: 20px;
  background-color: #f4f4f4;
  padding: 10px 20px 10px 20px;
  border-radius: 8px;
}
.pvMore>p{
  font-family: "黑体";
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}
/* PV列表 */
.pv-lb{
  font-family: "黑体";
  font-weight: bold;
  font-size: 14px;
  padding: 10px 15px;
  margin: 0;
}
.pv-lb:hover{
  background-color: white;
  border-radius: 4px;
}
@media (max-width: 1681px) {
  .but-jj{
    width: 70px;
    margin-bottom: 5px;
  }
  .jjList{
    flex-wrap: wrap;
  }
}
</style>
